<div class="items">
    <div class="item">
        1
    </div>
</div>
<style>
    .items {
        /* display: flex; */

    }

    .item {
        height: 30px;

    }
</style>

<script>
    const t = document.querySelector(".items");
    function appendItem(container, text) {
        const item = document.createElement("div")
        item.textContent = text;
        item.addEventListener("click", function (e) {
            console.log(text + " is clicked", e.currentTarget === item);
        })
        item.addEventListener("click", function (e) {
            console.log(text + " click triggered on capture", e.currentTarget === item);
        }, true)
        item.classList.add("item")
        container.appendChild(item)
    }

    document.addEventListener("DOMContentLoaded", function () {

        for (let i = 0; i < 10; i++) {
            appendItem(t, i);
        }
        t.addEventListener("click", function (e) {
            console.log("container click triggered", e.currentTarget === t)
        })
        t.addEventListener("click", function (e) {
            console.log("container click triggered on capture", e.currentTarget === t)
        }, true)
    })
</script>